<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<script type="text/javascript">
			function login() {
				top.window.location.href="/login.html"
			}
			function register() {
				top.window.location.href="/register.html"
			}
			function index() {
				top.window.location.href="/index.html"
			}
			function fan() {
				top.window.location.href="/findAllFan"
			}
			function search() {
				let vname = $("#mysearch").val();
				top.window.location.href = "/findAllVideo3/"+vname
			}
			function space(){
				let uid = $("span[name=1]").attr("id")
				top.window.location.href="/findUserById/"+ uid
				// location.href="/findUserById/"+ uid
			}
			function space2(){
				let uid = $("span[name=1]").attr("id")
				top.window.location.href="/findUserById2/"+ uid
			}
			function cancellation(){
				top.window.location.href="/cancellation"
			}
			function history(){
				let uid = $("span[name=1]").attr("id")
				top.window.location.href="/findAllHisByUid/"+uid
			}
		</script>

		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1,sharing-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">

		<!-- 引入CSS Swiper插件 -->
		<link rel="stylesheet" th:href="@{/css/swiper.min.css}">

		<!--引入手风琴CSS-->
		<link rel="stylesheet" th:href="@{/css/style.css}">

		<!--引入 Dplayer css-->
		<link rel="stylesheet" th:ref="@{/css/DPlayer.min.css}">

		<!--新加入-->
		<link rel="stylesheet" type="text/css" th:href="@{/css/demo.css}">

		<link th:href="@{/css/bootstrap-popover-x.css}" media="all" rel="stylesheet" type="text/css" />
		
		<style>
			.user{
				width:30px;
				height:30px;
				border-radius: 50%;
				border: #000000 1px solid;
			}
		</style>
		
	</head>
	<body>
		<div class="col shadow-sm" th:fragment="navi">
			<nav class="navbar p-1 navbar-expand-lg navbar-light bg-white" id="top">
				<a class="navbar-brand" href="#">
					<img th:src="@{/img/logo1.png}" class="img-fluid" style="max-width:80px;">
				</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item active">
							<a class="nav-link" href="#" th:onclick="|javascript:index()|">主站<span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#" th:onclick="|javascript:fan()|">番剧</a>
						</li>
					</ul>

					<form class="form-inline my-2 my-lg-0 ">
						<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" th:id="mysearch">
						<button class="btn btn-outline-dark my-2 my-sm-0" type="button" th:onclick="|javascript:search()|">搜索</button>
					</form>

					<span th:id="${session.uid}" th:name="1"/>
					<span th:if="${session.username==null}">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item">
								<a class="nav-link" href="#"></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" data-toggle="popover-x" data-target="#myPopover2a" data-placement="bottom">
									<img th:src="@{/img/logo.png}" class="user"></a>
								<!--未登陆前弹出框-->
								<div id="myPopover2a" class="popover popover-x popover-info">
									<div class="arrow"></div>
									<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>
										<img th:src="@{/img/logo.png}" class="align-content-center" style="height: 70px;width: 70px;border-radius: 50%; border: #000000 1px solid;">
										您还没有登陆哦！</h3>
									<div class="popover-body popover-content">
										<div class="card border-0">
											<img th:src="@{/img/loginpop.png}" class="card-img-top" alt="...">

											<div class="card-body">
												<a href="#" class="btn btn-info" style="width: 100px;" th:onclick="|javascript:login()|">登录</a>
												<a href="#" class="btn btn-info ml-1" style="width: 100px;" th:onclick="|javascript:register()|">注册</a>

												<hr />
												<div class="btn-group dropleft">
													<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
														🌏语言：简体中文
													</button>
													<div class="dropdown-menu">
														<a class="dropdown-item active" href="#">简体中文</a>
														<a class="dropdown-item" href="#">繁体中文</a>
														<a class="dropdown-item" href="#">English</a>
													</div>
												</div>

											</div>
										</div>
									</div>
								</div>
								<!--未登陆前弹出框-->
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link" th:onclick="|javascript:login()|">登录</a>
							</li>
							<li class="nav-item">
								<a href="#" class="nav-link" th:onclick="|javascript:register()|">注册</a>
							</li>
						</ul>
					</span>
					<span th:unless="${session.username==null}">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item">
								<a class="nav-link" href="#"></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" data-toggle="popover-x" data-target="#myPopover3a" data-placement="bottom">
									<img th:src="@{/img/logo.png}" class="user"></a>


								<!--登陆后弹出框-->
								<div id="myPopover3a" class="popover popover-x popover-info">
									<div class="arrow"></div>
									<h3 class="popover-header popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>
										<img th:src="@{/img/logo.png}" class="align-content-center" style="height: 70px;width: 70px;border-radius: 50%; border: #000000 1px solid;">
										用户名1</h3>
									<div class="popover-body popover-content">
										<div class="card border-0">
											<div class="card-body">
												<a href="#" class="btn btn-light" style="width: 65px;">关注
													<br>20</a>
												<a href="#" class="btn btn-light" style="width: 65px;">粉丝
													<br>--</a>
												<a href="#" class="btn btn-light" style="width: 65px;">动态
													<br>7</a>
											</div>
											<hr />
											<ul class="list-group list-group-flush">
												<li class="list-group-item">
													<a href="#" class="btn btn-light" style="width: 200px;">🧐个人中心</a>
												</li>
												<li class="list-group-item">
													<a href="#" class="btn btn-light" style="width: 200px;">📰投稿管理</a>
												</li>
												<li class="list-group-item">
													<div class="btn-group dropleft">
														<button type="button" class="btn btn-light dropdown-toggle" style="width: 200px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
															🌏语言：简体中文
														</button>
														<div class="dropdown-menu">
															<a class="dropdown-item active" href="#">简体中文</a>
															<a class="dropdown-item" href="#">繁体中文</a>
															<a class="dropdown-item" href="#">English</a>
														</div>
													</div>
												</li>
												<li class="list-group-item">
													<button type="button" class="btn btn-light" style="width: 200px;">❌退出</button>
												</li>
											</ul>

										</div>
									</div>
								</div>
								<!--登陆后弹出框-->

							</li>
							<li class="nav-item">
								<a th:text="${session.nickname}" class="nav-link" href="#" th:onclick="|javascript:space()|"/>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">消息</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">动态</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" th:onclick="|javascript:space2()|">收藏</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" th:onclick="|javascript:history()|">历史</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" th:onclick="|javascript:cancellation()|">注销</a>
							</li>
						</ul>
					</span>
				</div>
			</nav>
		</div>
		
		
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
		<!--引入popover.js-->
		<script th:src="@{/js/bootstrap-popover-x.js}" type="text/javascript"></script>
	</body>
</html>
